@import "less/lib/bootstrap/bootstrap";
@import "less/lib/prefixer";

// Global variables
// -------------------------

@img-root: "../../assets";


// NPR color palette
// -------------------------

@primary-control: #6d8ac4;
@deep-blue: #7598c9;
@blue-dark: #1E2E3A;
@blue-darker: #141D24;

@music-dark: #444d58;
@music-medium: #e6ebf2;
@music-light: #dbe0e6;
@music-red: #bc453e;
@music-red-dark: #6f3533;
@music-red-light: #f05b4e;

@music-event-dark: #2e333c;
@music-event-darker: #16191e;
@music-event-txt-light: #cfd3de;
@music-event-txt-dark: #8b9094;
@music-event-light-button-blue: @deep-blue;
@music-event-light-button: @deep-blue;
@music-event-light-highlight-txt: @primary-control;
@music-event-light-border: #252525;

@music-hp-light: #e7e4dd;
@music-hp-dark: #19262f;
@music-hp-link-color: #568fcb;
@music-hp-link-color2: #4a90e2;
@music-hp-c-t-asecondary: #8a8a8a;

@yellow: #EFC637;
@white: #fff;
@gray-medium: #A0A0A0;

@tag-1: #f97450;
@tag-2: #f05b4e;
@tag-3: #ce4242;
@tag-4: #b73759;
@tag-5: #933256;
@tag-6: #7b2c62;
@tag-7: #653279;
@tag-8: #524189;
@tag-9: #5756a5;
@tag-10: #416ab8;

// General styles
// -------------------------

.btn.btn-blue,
a.btn.btn-blue {
	background: none;
	background-color: #7598c9;
	border: none;
	border-radius: 0;
	line-height: 44px;
	height: 44px;
	color: #fff;
	padding: 0 20px;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	text-shadow: none;
	-webkit-font-smoothing: antialiased;

	&:hover { opacity: 0.7; }
	&:hover, &:active {
		color: #fff;
		background-color: #7598c9;
		background-position: auto;
		.transition(none)
	}
}

p {
	font-family: @font-family-serif;
}

.knockout-example {
	font-family: @font-family-condensed;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}


// Navbar
// -------------------------

nav {
	background-color: #e0e0e0;
	height: 46px;
	overflow: hidden;
	border-bottom: 2px solid #fff;

	ul {
	    list-style: none;
	    margin: 0;
	    padding: 0;

	    li {
	        float: left;
	        height: 44px;
	        line-height: 44px;
	        margin-left: 22px;
	        font-size: 12px;

	        &:first-child { margin-left: 0; }
	    }

	    &.site-links {
	        float: left;
	        margin-left: 30px;
	    }
	    &.site-links-2 {
	        float: right;
	        margin-right: 30px;
	    }
	}

	a,
	a:link,
	a:visited {
	    color: #6d8ac4;
	    font-weight: bold;
	    text-transform: lowercase;
	}
	a:hover,
	a:active { color: #bccae5; }

    .npr {
        width: 61px;

        img {
            margin: -2px 0 0 0;
            width: 100%;
            height: auto;
        }
    }
	.shop {
	    padding-left: 18px;
	    background: url() no-repeat 0% 50%;
	}
	.stations {
	    padding-left: 22px;
	    background: url() no-repeat 0% 50%;
	}
}


// Header
// -------------------------

header {
	background-color: #ebebeb;
	padding: 50px 30px 30px 30px;
	margin: 0;
	border-bottom: 2px solid #fff;

	h1 {
	    font-size: 48px;
	    color: #555;
	    margin-bottom: 11px;
	}
	h2 {
	    font-size: 15px;
	    color: #666;
	    margin: 0;
	}
}


// Cube ad
// -------------------------

.adwrapper {
    zoom: 1;
    padding: 0 0 12px 0;

    .sponsor300 {
        overflow: hidden;
        width: 300px;
        margin: 0 auto;
    }
    p {
        margin: 6px 0 0 0;
        font-size: 11px;
        color: #999;

        &.left { float: left; }
        &.right { float: right; }
        a { color: #6d8ac4; }
    }
}


// Content
// -------------------------

#content { margin-top: 44px; }
#story-meta {
	margin-bottom: 22px;

	p {
		font-size: 12px;
		margin: 0;
		color: #666;

		&.byline span { text-transform: uppercase; }
		&.dateblock .date { margin-right: 0.8em; }	}
}

h1 + #story-meta { margin-top: -11px; }



// Footer
// -------------------------

footer {
	padding: 0 15px 10px 15px;
	font-size: 10px;
	border-top: 2px solid #e0e0e0;

	ul {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}
	li, p { float: left; }
	a, a:link, a:visited {
	    color: #6d8ac4;
	    font-weight: bold;
	}
	a:hover, a:active { color: #bccae5; }

	.primary {
		float: left;
		height: 52px;
		font-size: 12px;
		text-transform: lowercase;

		img {
		    width: 66px;
		    margin-top: -2px;
		}
		li {
		    margin-left: 31px;
		    line-height: 52px;
		    text-transform: lowercase;

		    &:first-child {
		        margin-left: 0;
		        width: 66px;
		    }
		}
	}
	.secondary {
		height: 52px;

		p {
		    float: right;
		    margin-left: 30px;
		    line-height: 52px;
		    font-size: 12px;
		    float: right;
		    color: #999;
		}
		ul {
		    float: right;
		    margin-left: 30px;
		}
		li {
		    line-height: 52px;
		    font-size: 12px;
		    margin-left: 15px;
		}
		a {
		    color: #999;
		    font-weight: normal;
		}
	}
}


// Media queries
// -------------------------

@media (max-width: 979px) {
	nav ul.site-links-2 { display: none; }
	footer {
		.primary { float: none; }
		.secondary ul, .secondary p { margin-left: 0; float: left; }
	}
}
@media (max-width: 767px) {
	header { margin-left: -20px; margin-right: -20px; }
	nav ul.site-links { margin-left: 20px; }
	footer {
		.primary { display: none; }
		.secondary p { float: left; font-size: 10px; color: #bccae5; }
		.secondary ul { float: right; }
		.secondary li { font-size: 10px; text-transform: none; }
		.secondary a { color: #bccae5; }
	}
}
@media (max-width: 480px) {
	h1 { font-size: 26px; }
	#story-meta p { font-size: 11px; }
	nav ul.site-links {
		li { display: none; }
		.npr { display: block; }
	}
	header {
		padding: 33px 20px;
		h1 { font-size: 36px; }
	}
	footer { border-top: 1px solid #CCC; margin-top: 24px; }
	footer .secondary li {
		margin-left: 5px;
	}
}
